<template>
  <div id="hot_city_view_wrapper">
    <ul id="hot_city_view_wrapper_ul">
      <li id="hot_city_view_wrapper_li">
        <a id="hot_city_view_wrapper_a">国内城市</a>
      </li>
    </ul>
    <div>
      <el-input placeholder="搜索城市" style="width: 795px;height: 68px;">
        <template #prefix>
          <el-icon><search /></el-icon>
        </template>
        <template #suffix>
          <a id="hot_city_view_wrapper_input_a" @click="search()">搜索</a>
        </template>
      </el-input>
    </div>
  </div>
  <div id="hot_city_view_selection">
    <div id="hot_city_view_selection_head">
      <div style="margin-top: 20px;margin-bottom: 20px;">
        <div class="hot_city_view_selection_title">热门城市</div>
        <ul id="hot_city_view_selection_head_ul">
          <li class="hot_city_view_selection_head_li" v-for="hc in hot_cities">
            <a class="hot_city_view_selection_head_li_a" :href="hc.href">{{hc.name}}</a>
          </li>
        </ul>
      </div>
      <div style="margin-top: 20px;margin-bottom: 20px;">
        <div class="hot_city_view_selection_title">城市选择</div>
        <el-select v-model="province_select" placeholder="省份" style="width: 155px;height: 39px;padding: 0 14px;display: inline-block">
          <el-option
              v-for="item in sfs"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="city_select"  placeholder="城市" style="width: 155px;height: 39px;padding: 0 14px;display: inline-block">
          <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div id="hot_city_view_selection_body">
      <div class="hot_city_view_selection_title" style="margin-top: 29px;">按照省份首字母选择</div>
      <ul style="list-style: none;padding: 0">
        <li  class="hot_city_view_selection_body_li" v-for="item1 in lists">
          <div  class="hot_city_view_selection_body_li_head">
            <span class="hot_city_view_selection_body_li_head_span">{{item1.head}}</span>
          </div>
          <div  class="hot_city_view_selection_body_li_body">
            <div class="hot_city_view_selection_body_li_body_content" v-for="item2 in item1.body">
              <div class="hot_city_view_selection_body_li_body_content_title">{{item2.province_name}}</div>
              <ul class="hot_city_view_selection_body_li_body_content_ul">
                <li class="hot_city_view_selection_body_li_body_content_ul_li" v-for="item3 in item2.lists">
                  <a :href="item3.href" class="hot_city_view_selection_body_li_body_content_ul_li_a">{{item3.name}}</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>

//搜索方法
import {ref} from "vue";

const search = ()=>{

}

const hot_cities = ref([
  {name:'北京',href:'#'},
  {name:'上海',href:'#'},
  {name:'广州',href:'#'},
  {name:'深圳',href:'#'},
  {name:'成都',href:'#'},
]);

const province_select = ref();
const city_select = ref();

const sfs = ref([
  {label:'北京',value:'1'},
  {label:'北京1',value:'2'},
  {label:'北京2',value:'3'},
  {label:'北京3',value:'4'},
]);

const cities = ref([
  {label:'北京',value:'1'},
  {label:'北京1',value:'2'},
  {label:'北京2',value:'3'},
  {label:'北京3',value:'4'},
]);

const cs = ref([
  {name:'abc',url:'https://www.baidu.com'},
  {name:'ab1',url:'https://www.baidu.com'},
  {name:'ab2',url:'https://www.baidu.com'},
  {name:'ab3',url:'https://www.baidu.com'},
]);

const lists = ref([
  {
    head:'A',
    body:[
      {
        province_name:'安徽',
        lists:[
          {
            name:'a1',
            href:'#',
          },
          {
            name:'a2',
            href:'#',
          },
          {
            name:'a3',
            href:'#',
          },
        ]
      },
    ]
  },
  {
    head:'H',
    body:[
      {
        province_name:'河南',
        lists:[
          {
            name:'a1',
            href:'#',
          },
          {
            name:'a2',
            href:'#',
          },
          {
            name:'a3',
            href:'#',
          },
        ]
      },
      {
        province_name:'河北',
        lists:[
          {
            name:'a1',
            href:'#',
          },
          {
            name:'a2',
            href:'#',
          },
          {
            name:'a3',
            href:'#',
          },
        ]
      }
    ]
  }
]);
</script>

<style scoped>
#hot_city_view_wrapper{
  width: 1150px;
  margin: 0 auto;
  text-align: left;
}
#hot_city_view_wrapper_ul{
  list-style: none;
  margin-top: 44px;
  padding: 0px;
}
#hot_city_view_wrapper_li{
  display: inline-block;
  margin: 0;
}
#hot_city_view_wrapper_a{
  display: block;
  padding-bottom: 4px;
  color: #101d37;
  font-size: 24px;
  font-weight: bold;
}
#hot_city_view_wrapper_input_a{
  position: absolute;
  width: 100px;
  right: 10px;
  top: 12px;
  text-align: center;
  height: 45px;
  line-height: 45px;
  background: #3072f6;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
#hot_city_view_selection{
  width: 1150px;
  margin: 0 auto;
  padding-top: 25px;
  text-align: left;
}
#hot_city_view_selection_head{
  width: 100%;
}
.hot_city_view_selection_title{
  margin-right: 23px;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
}
#hot_city_view_selection_head_ul{
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}
.hot_city_view_selection_head_li{
  display: inline-block;
  padding: 0;
  margin-right: 14px;
}
.hot_city_view_selection_head_li_a{
  text-decoration: none;
  color: black;
}
#hot_city_view_selection_body{
  width: 100%;
}
.hot_city_view_selection_body_li{
  position: relative;
}
.hot_city_view_selection_body_li_head{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 55px;
  background-color: #f8f8f9;
  color: #afb3bb;
  border: 1px solid #ededed;
}
.hot_city_view_selection_body_li_head:hover{
  background-color: #3875ee;
  color: white;
}
.hot_city_view_selection_body_li_head_span{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 24px;
  height: 24px;
  text-align: center;
  display: block;
  margin: auto;
}
.hot_city_view_selection_body_li_body{
  margin-left: 55px;
  border: 1px solid #ededed;
}
.hot_city_view_selection_body_li_body_content{
  padding: 14px 0;
  line-height: 27px;
}
.hot_city_view_selection_body_li_body_content_title{
  margin-left: 40px;
  float: left;
}
.hot_city_view_selection_body_li_body_content_ul{
  list-style: none;
  margin-left: 114px;
}
.hot_city_view_selection_body_li_body_content_ul_li{
  display: inline-block;
  margin-left: 12px;
}
.hot_city_view_selection_body_li_body_content_ul_li_a{
  text-decoration: none;
  color: black;
}
</style>